<template>
  <div class="markdown-editor">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>Markdown预览工具</h3>
          <div class="header-actions">
            <el-button-group>
              <el-button @click="insertTemplate">插入示例</el-button>
              <el-button @click="clearContent">清空</el-button>
              <el-button type="primary" @click="copyHtml">复制HTML</el-button>
            </el-button-group>
          </div>
        </div>
      </template>

      <div class="editor-container">
        <div class="editor-section">
          <div class="section-header">
            <span>Markdown文本</span>
            <el-button-group>
              <el-button size="small" @click="insertSyntax('bold')">粗体</el-button>
              <el-button size="small" @click="insertSyntax('italic')">斜体</el-button>
              <el-button size="small" @click="insertSyntax('link')">链接</el-button>
              <el-button size="small" @click="insertSyntax('image')">图片</el-button>
              <el-button size="small" @click="insertSyntax('code')">代码</el-button>
            </el-button-group>
          </div>
          <el-input
            v-model="markdownContent"
            type="textarea"
            :rows="20"
            resize="none"
            placeholder="在此输入Markdown文本"
          />
        </div>

        <div class="preview-section">
          <div class="section-header">
            <span>预览</span>
          </div>
          <div class="preview-content markdown-body" v-html="htmlContent"></div>
        </div>
      </div>

      <el-collapse>
        <el-collapse-item title="Markdown语法参考">
          <div class="syntax-reference">
            <el-table :data="syntaxReference" border stripe>
              <el-table-column prop="syntax" label="语法" width="200" />
              <el-table-column prop="description" label="说明" />
              <el-table-column prop="example" label="示例" width="250" />
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { marked } from 'marked'
import { ElMessage } from 'element-plus'

const markdownContent = ref('')
const htmlContent = ref('')

// Markdown语法参考
const syntaxReference = [
  {
    syntax: '# 标题',
    description: '1-6个#号表示不同级别的标题',
    example: '# 一级标题\n## 二级标题'
  },
  {
    syntax: '**粗体**',
    description: '文字两边加上两个星号',
    example: '这是**粗体**文字'
  },
  {
    syntax: '*斜体*',
    description: '文字两边加上一个星号',
    example: '这是*斜体*文字'
  },
  {
    syntax: '[链接](URL)',
    description: '方括号内是链接文字，圆括号内是URL',
    example: '[百度](https://www.baidu.com)'
  },
  {
    syntax: '![图片](URL)',
    description: '同链接语法，但前面加上感叹号',
    example: '![示例图片](image.jpg)'
  },
  {
    syntax: '> 引用',
    description: '在文字前加上大于号',
    example: '> 这是一段引用'
  },
  {
    syntax: '- 列表项',
    description: '使用减号、加号或星号作为列表标记',
    example: '- 项目1\n- 项目2'
  },
  {
    syntax: '1. 有序列表',
    description: '使用数字加点号',
    example: '1. 第一项\n2. 第二项'
  },
  {
    syntax: '\`代码\`',
    description: '使用反引号包裹代码',
    example: '这是一段\`inline code\`'
  },
  {
    syntax: '```\n代码块\n```',
    description: '使用三个反引号包裹代码块',
    example: '```\nfunction hello() {\n  console.log("Hello");\n}\n```'
  }
]

// 监听Markdown内容变化，实时更新预览
watch(markdownContent, (newContent) => {
  try {
    htmlContent.value = marked(newContent)
  } catch (e) {
    console.error('Markdown解析错误:', e)
  }
})

// 插入Markdown语法
const insertSyntax = (type) => {
  const syntax = {
    bold: '**粗体文字**',
    italic: '*斜体文字*',
    link: '[链接文字](https://example.com)',
    image: '![图片描述](https://example.com/image.jpg)',
    code: '`代码`'
  }

  const textarea = document.querySelector('.editor-section textarea')
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const content = markdownContent.value

  markdownContent.value = content.substring(0, start) + syntax[type] + content.substring(end)
  
  // 恢复焦点并选中插入的内容
  setTimeout(() => {
    textarea.focus()
    textarea.setSelectionRange(start, start + syntax[type].length)
  }, 0)
}

// 插入示例内容
const insertTemplate = () => {
  markdownContent.value = `# Markdown示例

## 标题示例
### 三级标题
#### 四级标题

## 文本格式
这是一段普通文本，包含**粗体**和*斜体*文字。

## 链接和图片
这是一个[链接示例](https://example.com)
![图片示例](https://example.com/image.jpg)

## 列表
### 无序列表
- 项目1
- 项目2
  - 子项目A
  - 子项目B

### 有序列表
1. 第一项
2. 第二项
3. 第三项

## 引用
> 这是一段引用文字
> 可以有多行

## 代码
行内代码：\`console.log('Hello World')\`

代码块：
\`\`\`javascript
function greeting(name) {
  return \`Hello, \${name}!\`;
}
\`\`\`

## 表格
| 表头1 | 表头2 |
|-------|-------|
| 内容1 | 内容2 |
| 内容3 | 内容4 |
`
}

// 清空内容
const clearContent = () => {
  markdownContent.value = ''
}

// 复制HTML
const copyHtml = () => {
  if (!htmlContent.value) {
    ElMessage.warning('没有可复制的内容')
    return
  }

  navigator.clipboard.writeText(htmlContent.value)
    .then(() => ElMessage.success('复制成功'))
    .catch(() => ElMessage.error('复制失败'))
}
</script>

<style>
/* 引入GitHub Markdown样式 */
.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 15px;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body h1 { font-size: 2em; }
.markdown-body h2 { font-size: 1.5em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body h5 { font-size: 0.875em; }
.markdown-body h6 { font-size: 0.85em; }

.markdown-body p {
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27,31,35,0.05);
  border-radius: 3px;
}

.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}

.markdown-body pre code {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

.markdown-body blockquote {
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
  margin: 0 0 16px 0;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body table {
  display: block;
  width: 100%;
  overflow: auto;
  margin-top: 0;
  margin-bottom: 16px;
  border-spacing: 0;
  border-collapse: collapse;
}

.markdown-body table th,
.markdown-body table td {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

.markdown-body table tr {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

.markdown-body table tr:nth-child(2n) {
  background-color: #f6f8fa;
}
</style>

<style scoped>
.markdown-editor {
  max-width: 1200px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h3 {
  margin: 0;
}

.editor-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.editor-section,
.preview-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.preview-content {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 100%;
  overflow-y: auto;
}

.syntax-reference {
  margin-top: 10px;
}
</style> 